<template>
  <div style="width: 1000px">
    <el-table border class="inputcolumn" :data="selectedDataCopy" style="width: 1000px" ref="tableList"
      row-key="itemId">

      <el-table-column prop="deviceImage" label="图片" align="center" width="100">
        <template slot-scope="scope">
          <el-image v-if="
  scope.row.itemMainImage != null && scope.row.itemMainImage != ''
" slot="reference" :src="scope.row.itemMainImage" class="image-rows"
            :preview-src-list="[scope.row.itemMainImage]">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="itemName" label="项目名称" width="100" align="left" />
      <el-table-column label="面价" align="center" prop="itemPriceStr" />
      <el-table-column label="活动价格" align="center" prop="itemFavorablePriceStr" />
      <el-table-column label="结算价格" align="center" prop="itemSettlementPriceStr" />
      <el-table-column label="项目类别" align="center" prop="itemTypeStr" />
      <el-table-column label="是否投放门店" align="center" prop="isCommon">
        <template slot-scope="scope">
          <span>{{ scope.row.isCommon == '1' ? '通用' : '指定门店' }}</span>
        </template>
      </el-table-column>

      <el-table-column label="是否推荐"
          align="center"
          prop="isTuiJian"
         >
          <template slot-scope="scope">
            <el-switch v-model="scope.row.isTuiJian"
              active-value="1"
              inactive-value="0"
             ></el-switch>
          </template>
        </el-table-column>

      <el-table-column align="center" prop="receiveNumber" label="操作" v-if="canDelete">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleDeleteser(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <template v-if="pageType != 'group'">
      <pagination v-show="total > 0" :total="total" :page-sizes="pageSizess" :page.sync="pageNum" :limit.sync="pageSize"
        @pagination="getList" />
    </template>
  </div>
</template>
<script>
import Sortable from 'sortablejs'

import {updateRecommend} from "@/api/product/group";

export default {
  props: {
    selectedData: {
      type: Array,
      default: function () {
        return []
      }
    },
    canDelete: {
      type: Boolean,
      default: true
    },
    pageType: {
      type: String,
      default: ''
    },
    groupId: {
      type: String,
      default: ''
    },
    groupType: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      selectedDataCopy: [],
      total: this.selectedData.length,
      pageSizess: [5, 10, 15, 20, 25, 30, 50],
      pageNum: 1,
      pageSize: 5,

    }
  },

  created() {
    if (this.total > 0) {
      this.getList();
    }
  },
  methods: {
    dragSort() {
      const el = this.$refs.tableList.$el.querySelectorAll(
        ".el-table__body-wrapper > table > tbody"
      )[0];
      const _this = this
      Sortable.create(el, {
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.selectedData.splice(oldIndex, 1)[0]
          _this.selectedData.splice(newIndex, 0, currRow)
          console.log(_this.selectedData, '----')
        }
      })
    },
    getList() {
      this.selectedDataCopy = [];
      let startNum = (this.pageNum - 1) * this.pageSize;
      let endNum = this.pageNum * this.pageSize;
      /*if($this.pageNum == 1){
        num =  $this.pageNum * $this.pageSize;
      }*/
      this.total = this.selectedData.length

      if (this.pageType == 'group') {
        this.selectedData.forEach((data, index) => {
          // if (index >= startNum && index < endNum) {
          this.selectedDataCopy.push(data);
          //}
        })
      } else {
        this.selectedData.forEach((data, index) => {
          if (index >= startNum && index < endNum) {
            this.selectedDataCopy.push(data);
          }
        })
      }
      if (this.selectedDataCopy.length == 0) {
        if (this.pageNum > 1) {
          this.pageNum = this.pageNum - 1
          this.getList()
        }
      }
      if (this.pageType == 'group') {
        this.$nextTick(() => {
          this.dragSort()
        })
      }
      // console.log(this.selectedData)
      // console.log(this.selectedDataCopy)
    },
    handleStatusChange (row) {
      let text = row.isTuiJian === "0" ? "不推荐" : "推荐";
      this.$confirm('确定要设为' + text + '吗？', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
      
      })
    },
    handleDeleteser(val, row) {
      // 模态框删除按钮
      this.$confirm("是否确认删除本条数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info",
      }).then(() => {
        let index = null
        this.selectedData.forEach((item, idx) => {
          if (item.itemId == row.itemId) {
            index = idx
          }
        })
        this.selectedData.splice(index, 1);
        //数据回传
        // this.$emit('tabRespon', this.selectedData)
        this.getList();
      });
    },
  },
};
</script>
